<template>
  <el-dialog v-model="dialogTableVisible" title="分配角色" width="400px">
    <!-- <el-form :inline="true" class="demo-form-inline"> -->
    <el-select v-model="name" multiple placeholder="请选择角色" style="width: 240px" value-key="id">
      <el-option v-for="item in options" :key="item.name" :value="item.name" />
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
    <!-- </el-form> -->
  </el-dialog>

</template>
  
<script setup lang='ts'>
import EventBus from '@/utils';
import { reactive, ref, watch } from 'vue'
import * as http from '@/request/api'
const emit = defineEmits<{ (event: 'assign'): void }>()

const dialogTableVisible = ref(false)
const adminId = ref(0)

let name = ref<string[]>([])
let roleId = ref<number[]>([])
const options = ref<IAssignRes[]>([
  {
    id: 1,
    name: '商品管理员'
  },
  {
    id: 2,
    name: '订单管理员'
  },
  {
    id: 5,
    name: '超级管理员'
  },
])

// 分配角色
interface IVal {
  role: IAssignRes[],
  id: number
}
EventBus.on('assign', (val: IVal) => {
  dialogTableVisible.value = true
  adminId.value = val.id
  name.value = []
  val.role.map(item => {
    name.value.push(item.name);
  }
  )
})
function close() {
  dialogTableVisible.value = false
}
async function confirm() {
  roleId.value = name.value.map(item => {
    let index = options.value.findIndex(el => el.name === item)
    return options.value[index].id
  })
  let RoleUpdateRes = await http.admin.AdminRoleUpdate({
    adminId: adminId.value, roleIds: roleId.value.join(',')
  })
  emit('assign')
  dialogTableVisible.value = false
}

</script>
  
<style scoped>
:deep(.el-tag) {
  width: 120px;
  display: flex;
  justify-content: space-between;
}
</style>